<template>
  <div class="view-container">
    <el-form :model="queryParam" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="queryParam.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="queryParam.nickname" placeholder="请输入用户昵称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户电话" prop="userTelephone">
            <el-input v-model="queryParam.userTelephone" placeholder="请输入用户电话"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nebula-table :columns="columns" :data="tableData" use-tool-bar border header-row-class-name="header-row-class"
                  size="default" :total="rowsTotal" :default-page-size="10" show-overflow-tooltip @change="changePage">
      <template #head-toolbar>
        <el-button type="primary" @click="handleCreate" size="small">新增</el-button>
      </template>
      <template #userSex="scope">
        <dict-tag :options="dictValue.default_sex" :values="scope.row.userSex"></dict-tag>
      </template>
      <template #userStatus="scope">
        <el-switch v-model="scope.row.userStatus" :active-value="0" :inactive-value="1" active-text="启用"
                   inactive-text="禁用" @change="switchChange(scope)" inline-prompt></el-switch>
      </template>
      <template #operation="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="success" size="small" @click="modifyPassword(scope.row)">修改密码</el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row)" v-if="scope.row.username !== 'admin'">
          删除
        </el-button>
      </template>
    </nebula-table>
    <el-dialog v-model="isShow" title="新增用户">
      <div class="view-container">
        <el-form :model="createParam" label-width="auto">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="createParam.username"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="createParam.nickname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="isCreate">
              <el-form-item label="密码" prop="password">
                <el-input v-model="createParam.password" type="password" password></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="userTelephone">
                <el-input v-model="createParam.userTelephone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="userEmail">
                <el-input v-model="createParam.userEmail"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="userSex">
                <el-radio v-for="item in dictValue.default_sex" v-model="createParam.userSex"
                          :value="Number(item.dictKey)" :label="item.dictValue"></el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="createCancel">取消</el-button>
        <el-button type="primary" @click="createSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="showPwd" title="修改密码">
      <div class="view-container">
        <el-form :model="modifyPwdParam" label-width="auto">
          <el-row space=20>
            <el-col md="24">
              <el-form-item label="新密码" prop="password">
                <el-input v-model="modifyPwdParam.password" type="password" password></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="pwdCancel">取消</el-button>
        <el-button type="primary" @click="pwdSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {createOrEditUserInfo, getUserTableData, modifyPwd} from "@/api/sysUser.js";
import {onMounted} from "vue";
import {getDict} from "@/util/dict.js";
import DictTag from "@/components/DictTag.vue";
import NebulaTable from "@/components/NebulaTable.vue";
import {ElMessageBox, ElNotification} from "element-plus";
import {createOrEditDictData} from "@/api/sysDict.js";

defineOptions({
  name: "sysUser"
})

const dicts = ["default_sex"]

const proxy = getCurrentInstance();
const dictValue = ref({})

const queryParam = ref({
  username: null,
  nickname: null,
  userTelephone: null,
  userEmail: null,
  pageNum: 1,
  pageSize: 10
})

const tableData = ref([])
const rowsTotal = ref(0)

const columns = ref([
  {title: "用户名", key: "username", align: "center"},
  {title: "昵称", key: "nickname"},
  {title: "性别", key: "userSex", align: "center", customSlot: "userSex"},
  {title: "电话", key: "userTelephone", align: "center"},
  {title: "邮箱", key: "userEmail", align: "center"},
  {title: "用户状态", key: "userStatus", align: "center", customSlot: "userStatus"},
  {title: "创建时间", key: "createTime", align: "center"},
  {title: "操作", align: 'center', customSlot: 'operation', width: 250}
])

const isCreate = ref(true)
const isShow = ref(false)
const showPwd = ref(false)

const createParam = ref({
  username: null,
  nickname: null,
  password: null,
  userSex: null,
  userTelephone: null,
  userEmail: null,
})

const modifyPwdParam = ref({
  id: null,
  password: null
})
const action = ref([
  {
    text: "确认",
    callback: () => {
      createOrEditUserInfo(createParam.value).then(res => {
        if (res.code === 200) {
          isShow.value = false
          handleQuery()
          // layer.notify({
          //   title: "操作成功",
          //   icon: 1
          // })
        }
      })
    }
  },
  {
    text: "取消",
    callback: () => {
      isShow.value = false
      for (let key in createParam.value) {
        createParam.value[key] = null;
      }
    }
  }
])

const pwdSubmit = () => {
  modifyPwd(modifyPwdParam.value).then(res => {
    if (res.code === 200) {
      showPwd.value = false
      handleQuery()
      ElNotification({
        title: "操作成功",
        type: "success"
      })
    } else {
      ElNotification({
        title: "操作失败",
        type: "error",
        message: res.msg
      })
    }
  })
}

const pwdCancel = () => {
  showPwd.value = false
  for (let key in createParam.value) {
    createParam.value[key] = null;
  }
}
const createSubmit = () => {
  createOrEditDictData(createParam.value).then(res => {
    if (res.code === 200) {
      isShow.value = false
      handleQuery()
      ElNotification({
        title: "操作成功",
        type: "success"
      })
    } else {
      ElNotification({
        title: "操作失败",
        type: "error",
        message: res.msg
      })
    }
  })
}
const createCancel = () => {
  isShow.value = false
  for (let key in createParam.value) {
    switch (key) {
      case "typeId":
        createParam.value[key] = route.params.dictId;
        continue;
      case "useTag":
        createParam.value[key] = 0;
        continue;
      default:
        createParam.value[key] = null;
    }
  }
}


const handleQuery = () => {
  getUserTableData(queryParam.value).then(res => {
    tableData.value = res.data.rows
    rowsTotal.value = res.data.total
  })
}

const resetParams = () => {
  for (let key in queryParam.value) {
    if (key !== "pageNum" && key !== "pageSize") {
      queryParam.value[key] = null;
    }
  }
}

const changePage = (currentPage,pageSize) => {
  queryParam.value.pageNum = currentPage
  queryParam.value.pageSize = pageSize
  handleQuery()
}
const handleCreate = () => {
  isCreate.value = true
  isShow.value = true
}

const handleEdit = (row) => {
  createParam.value = {...row}
  isCreate.value = false
  isShow.value = true
}

const switchChange = (scope) => {
  const row = scope.row;
  const index = scope.index
  if (index === -1) return
  createOrEditUserInfo(row).then(res => {
    if (res.code === 200) {
      handleQuery()
      ElNotification({
        title: "操作成功",
        type: "success"
      })
    } else {
      ElNotification({
        title: "操作失败",
        type: "error",
        message: res.msg
      })
    }
  })
}

const handleDelete = (row) => {
  const confirmText = `确定要删除用户【${row.nickname}】吗?`
  ElMessageBox.confirm(
      confirmText,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    row.isDeleted = 1
    createOrEditUserInfo(row).then(res => {
      if (res.code === 200) {
        isShow.value = false
        handleQuery()
        ElNotification({
          title: "操作成功",
          type: "success"
        })
      } else {
        ElNotification({
          title: "操作失败",
          type: "error",
          message: res.msg
        })
      }
      handleQuery()
    })
  })
}

const modifyPassword = (row) => {
  modifyPwdParam.value.id = row.id
  showPwd.value = true
}

onMounted(() => {
  handleQuery()
  dictValue.value = getDict({type: {dicts}})
})

</script>
